<template>
  <div class="cent">
    <div class="title">
      <p style="color: #333333;font-size: .24rem">新闻资讯<span class="iocn"> <img :src="newsImg"> </span></p>
    </div>
    <p class="err" v-show="!tableData1.id">暂无新闻</p>
    <div class="listBox clearfix" :ListData="ListData">
       <div class="imgBoxLfet" v-show="tableData1.id" @click="gonwes(tableData1.id)">
         <div class="imgBoxs" >
           <img :src="tableData1.img">
         </div>
         <p class="title">{{tableData1.title}}</p>
       </div>
      <div class="Box"  v-show="tableData2.length>0">
        <div class="list">
          <div class="card" v-for="(lis,index) in tableData2">
            <p class="title" @click="gonwes(lis.id)">{{lis.title}}</p>
            <p class="cop">{{lis.text}}</p>
            <span class="time">{{lis.createTime}}</span>
          </div>
        </div>
        <p class="go">
          <span class="iocns" >
          <span class="" style="cursor: pointer;" @click="goPage('newsList')"><img :src="icon" style="position: relative;top: .02rem"/> </span>
          <span class="textgo" @click="goPage('newsList')"> 更多新闻</span>
        </span>
        </p>
      </div>
      <div class="cleae">
      </div>
    </div>
  </div>
</template>
<style scoped>
  .title{font-weight: bold;color: #333333; font-size: .24rem; cursor: pointer; font-family: "Helvetica Neue",  Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .title p{color: #333333}
  .cent{width:70%;background-color:#fff;padding:.33rem 0px;min-width:1000px;max-width: 1200px;margin:auto}
  .iocn img{width: .45rem;position:relative;top: .10rem}
  .listBox{padding-top: .4rem;}
  .Box{margin-left: 3.5rem; }
  .list{height:2.8rem;overflow: hidden}
  .el-icon-plus{font-weight: bold; background-color:#5ea3d1;color:#fff;margin: 0px 10px;font-size: 12px;padding: 4px 5px}
  .imgBoxLfet{float:left;width: 3.2rem;position:relative;font-size:.12rem;  }
  .imgBoxLfet .title{font-size: .16rem; position:absolute;bottom:.0rem;height: .5rem;line-height: .25rem;background-color: rgba(0,0,0,0.5);text-align: left;padding: .10rem .05rem 0px .05rem;width:3.1rem;color: #fff;}
  .imgBoxLfet  .imgBoxs{width: 100%;height:3.2rem;overflow: hidden; }
  .imgBoxLfet  .imgBoxs img{width: 100%;height:3.2rem}
  .card{position: relative;margin-bottom: 28px;}
  .list  .title{ line-height: .25rem;text-align: left;overflow: hidden;font-weight: bold;font-size: .16rem;padding-bottom: 8px}
  .cop{width: 93%;height: 40px;line-height:21px;overflow: hidden;text-align: left;font-size: 14px;color:#909090;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .time{ position: absolute;top: 5px;right: .2rem;font-size: .12rem;color: #909090}
   p.go{text-align: left;padding-top: .2rem; line-height: 0rem;}
  .iocn{width: 2rem;height: .3rem;margin-left: 10px}
  .iocns{ display: block;width: 2rem; height: .3rem;}
  .textgo{font-weight: bold; font-size: .16rem;color: #5ea3d1;line-height: 0rem;cursor: pointer;}
  .err{font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;font-size:14px;font-weight: bold ;line-height: 1rem}

  @media only screen and (min-width: 1200px){
    .list{height:2.8rem;overflow: hidden}
  }
  @media only screen and (min-width: 1400px){
    .list{height:255px;overflow: hidden}
  }
  @media only screen and (min-width: 1600px){
    .list{height:270px;overflow: hidden}
  }
  @media only screen and (min-width: 1920px){
    .list{height:2.8rem;overflow: hidden}
  }
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import imgdeift from '../../../../static/img/icon/newsDeft2.png'
  import  newsImg from '../../../../static/img/icon/news.png'
  import  icon from '../../../../static/img/icon/icon_+.png'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-adminChart',
    data () {
      return {
        page:{page:1,pageSize:5,count:0},
        tableData1:{title:'',img:newsImg,id:""},
        tableData2:[],
        newsImg:newsImg,
        icon:icon
      }
    },
    methods: {
      ...mapActions({
        showNewsList: 'showNewsList',
      }),
      gonwes (id) {
        this.$router.push({ name: 'newsDitle',query:{id:this.$route.name,chartID:id} })
      },
      // 去下个页面
      goPage (name) {
        this.$router.push({name: name})
      },
      // 查询
      saechFn(){
        var parm = {status:1,page:this.page.page,pageSize:this.page.pageSize}
        this.showNewsList(parm)
      },
      // 列表解析
      updateListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.page.count = Math.ceil(cunt / this.page.pageSize)
        }
        res = res.body.data
        this.tableData2 = []
        var time = Public.publicLo.timeCheng()
        for (let i in res) {
          var dom = document.createElement('div')
          dom.innerHTML=res[i].content;
          var text,src = imgdeift
          var domType = ''
          for(let k in  dom.childNodes){
            domType = dom.childNodes[k].nodeName
            if(domType== 'P'|| domType== '#text' ){
              text = dom.childNodes[k].innerText || dom.childNodes[0].textContent
              break
            }
          }
          for(let k in  dom.childNodes){
            domType = dom.childNodes[k].nodeName
            if( domType != '#text') {
              var img = dom.getElementsByTagName('img')
              if(img[0]){
                src = img[0].src
              }
            }
          }
          if(res[i].createTime){
            time = Public.publicLo.timeCheng(res[i].createTime)
          }
          var pu = {
            id: res[i].id,
            title: res[i].title,
            type:res[i].type,
            typeText: res[i].type==1?'普通新闻':'公告',
            creatorId:res[i].creatorId,
            img:src,
            text:text,
            status:res[i].status,
            createTime: time.ymd,
            statusText: res[i].status==0?'新建': res[i].status==1?'发布':res[i].status==2?'下架':'异常'
          }
          this.tableData2.push(pu)
        }
        var x = Math.ceil(Math.random()* res.length)-1
        this.tableData1 = this.tableData2[x]
      },
    },
    computed: {
      ListData: function () {
        var parm = this.updateList
        if (parm) {
          this.updateListFn(parm)
        }
        return 1
      },
      ...mapState([
        'updateList',
        'updateStatus',
        'language',
        'show'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
      this.saechFn()
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

